<template>
  <div class="cart">
    <view class="cart-top" @tap="chooseAddress">
      <block v-if="address.userName">
        <view class="user">
          <view>收件人：{{address.userName}}</view>
          <view>{{address.telNumber}}</view>
        </view>
        <view class="address">收件地址：{{address.addr}}</view>
      </block>
      <block v-else>
        <view class="add-addresss">新增收货地址 +</view>
      </block>
      <view class="address-border"></view>
    </view>
    <view class="UG-life">
      <view class="UG-tytle">
        <span></span>优购生活馆
      </view>
      <view class="cart-content">
        <block v-for="(item,keyId) in cartList" :key="keyId" >
          <view class="cart-item" @tap="goToDetail(keyId)" v-if="item.count>0">
            <view class="pro-show">
              <image :src="item.goods_small_logo"></image>
              <view class="pro-info">
                <view class="pro-tytle">{{item.goods_name}}</view>
                <view class="price-add">
                  <view class="left-price">{{item.goods_price}}</view>
                  <view class="right-add">               
                    <span>数量：{{item.count}}</span>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </block>
      </view>
    </view>
    <button type="primary" @tap="payOrder" class="payButton">支付订单</button>
  </div>
</template>
<script>
import {req_unifiedorder,chkOrder} from '@/api'
export default {
  data() {
    return {
      address: {
        userName: "",
        telNumber: "",
        addr: ""
      },
      cartList: {},
      order_number:''

    };
  },
  onLoad(query) {
    this.address = wx.getStorageSync("address") || {};
    this.order_number = query.order_number
  },
  onShow() {
    this.cartList = wx.getStorageSync("cartListData") || {};
  },
  methods: {
    choiceAll(bl){
      for(let key in this.cartList){
        this.cartList[key].selected = !bl
      }
    },
    chooseAddress() {
      wx.chooseAddress({
        success(res) {
          this.address = {
            userName: res.userName,
            telNumber: res.telNumber,
            addr: `${res.provinceName}${res.cityName}${res.countyName}${
              res.detailInfo
            }`
          };
          wx.setStorageSync("address", this.address);
        }
      });
    },
    goToDetail(id){
      wx.navigateTo({ url: '/pages/detail/main?id='+id });
    },
   payOrder(){
     console.log(this.order_number)
     req_unifiedorder({'order_number':this.order_number}).then(res=>{
         let {wxorder} = res.data.message
        wx.requestPayment({
          ...wxorder,
          success:res=> { 
            wx.showToast({
              title: '支付成功', //提示的内容,
              icon: 'success',  //图标,
              duration: 1000,   //延迟时间,
              mask: true,       //显示透明蒙层，防止触摸穿透,
            });
             for(let key in this.cartList){
              if(this.cartList[key].selected){
                delete this.cartList[key];
              }
            }
            this.cartList = JSON.parse(JSON.stringify(this.cartList));
            wx.setStorageSync('cartListData',this.cartList);
          },
          fail:res=>{
            wx.showToast({
              title: '支付失败', //提示的内容,
              icon: 'warn',  //图标,
              duration: 1000,   //延迟时间,
              mask: true,       //显示透明蒙层，防止触摸穿透,
            });
           }
        })
     })
   }
  },
};
</script>
<style lang="scss" scoped>
.cart {
  .cart-top {
    min-height: 180rpx;
    position: relative;
    .user {
      display: flex;
      padding: 20rpx;
      justify-content: space-between;
      position: relative;
      padding-right: 50rpx;

      &:after {
        display: block;
        content: "";
        width: 12px;
        height: 12px;
        border-top: 1px #999 solid;
        border-right: 1px #999 solid;
        transform: rotate(45deg);
        position: absolute;
        right: 20rpx;
        top: 20rpx;
        margin-top: 6px;
      }
    }

    .address {
      padding: 20rpx;
      padding-top: 0;
    }

    .address-border {
      width: 100%;
      height: 8px;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: red;
    }

    .add-addresss {
      height: 180rpx;
      padding: 20rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .UG-life {
    background: #fff;
    .UG-tytle {
      padding: 30rpx;
      font-size: 36rpx;
      border-bottom: 1px solid #ccc;
    }
    .cart-content {
      padding-bottom: 110rpx;
      .cart-item {
        display: flex;
        align-items: center;
        span {
          padding: 0 30rpx;
        }
        .pro-show {
          flex: 1;
          padding: 24rpx 0;
          border-bottom: 1px solid #ccc;
          display: flex;
          padding-left: 20rpx;
          image {
            width: 160rpx;
            height: 160rpx;

          }
          .pro-info {
            flex: 1;
            padding: 0 18rpx;
            height: 100%;
            .pro-tytle {
              font-size: 26rpx;
              margin-bottom: 42rpx;
              overflow: hidden;
              display: -webkit-box;
              text-overflow: ellipsis;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              white-space: normal;
            }
            .price-add {
              .left-price {
                float: left;
                color: red;
              }
              .right-add {
                float: right;
                span {
                  float: right;
                  display: block;
                  height: 52rpx;
                  line-height: 52rpx;
                  text-align: center;
                  font-size: 35rpx;
                }
              }
            }
          }
        }
      }
    }
  }
  .payButton{
    margin: 0 20rpx;
  }
  .cart-total {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    .total-button {
      width: 20%;
      padding-left: 20px;
      icon {
        margin-right: 10px;
      }
    }
    .total-center {
      flex: 1;
      padding: 20rpx;
      text-align: left;
      .colorRed {
        color: red;
      }
      .price-tips {
        font-size: 14px;
        color: #666;
      }
    }
    .accounts {
      width: 30%;
      height: 100rpx;
      background: red;
      color: #fff;
      line-height: 100rpx;
      text-align: center;
    }
  }
  .icon-xuanze-fill{
    color:red;
  }
}
</style>
